GIFmation(tm) 2.1 has a very ergonomic and intuitive interface, but it has several different elements with which you need to be familiar, in order to fully utilize the capabilities of the application. The following section will familiarize you with the five major interface elements in GIFmation(tm) 2.1.

The Document Window

The Document Window is the main element of the interface. It acts as the image editing window and the animation preview. In GIFmation(tm) 2.1 you may open multiple documents at once, and each will have a separate document window. In the picture below, two documents, 'drink.gif' and 'gmbutton.gif', are open in GIFmation(tm) 2.1. Their titles are highlighted.

The document title, current frame number, total number of frames, and the zoom level are displayed (in that order) in the title bar of each document window in GIFmation(tm) 2.1.

There are two main groups of controls in the document window. Controls for animation preview and navigation are along the bottom left of the document window, and controls for onion-skinning are along the upper right side of the document window.

Onion skinning controls consist of three buttons (from top to bottom) 'onion skin next', 'no onion skinning', and 'onion skin previous'. When the 'onion skin next' button is on, the next image is visible through the current image and when 'onion skin previous' is on the previous image is visible through the current image. This provides a visual aid for the positioning and alignment of images in GIFmation(tm) 2.1. When the 'no onion skinning' button is on, the current image is rendered opaquely and no images are visible through it.

The controls, for previewing your animation and navigating through the animation frames while editing, are along the bottom left of the document window. They are (from left to right) the stop button, the play/pause button, the frame slider, the step back button, the step forward button, and the speed menu.

If you click the stop button while the animation is playing in the document window, it will cause the animation to stop and set the visible frame to the first image in the animation. If you click the stop button while the animation is paused it will just set the visible frame to the first frame in the animation and set the internal state to stopped instead of paused. If you click the stop button when the animation is already stopped, it does nothing.

To the right of the stop button is the play pause button. If you click the play/pause button when the animation is stopped it will begin to play in the document window. If you click again while the animation is playing the animation will pause on the currently visible frame. Clicking while paused will resume playing the animation.

The Document Window also shows the current visible image in your animation, and visual information on the 'Logical Screen Size' of the animation, as well as the 'Image Size' of the currently visible image.

Above, is an empty animation document. As the title bar of the document window indicates, it contains no frames (images), but it does show the logical screen size of the animation. In this case 117 pixels wide by 42 pixels high.

The logical screen size is the area that all images in a GIF animation must render within. It is a global file parameter that applies to the whole animation. Another way of thinking of the logical screen size, for those familiar with Adobe Photoshop, is as the animation's canvas size.

The document window will always display the portion of the animation's logical screen size that is not covered by an image with the currently set browser background color, in this case white. The remaining area inside the document window that is filled with a black and white pattern is not part of the animation, but just excess fill.

Images in your animation cannot extend outside the area of the logical screen size. The dimensions of the currently visible image in the document window are shown with the corner marks you see above when the animation is stopped. If the animation is only paused, these corner marks will not be rendered.

The document window also serves as the animation preview. The GIF animation above shows the appearance of the document window as an animation plays. When an animation is playing, you can use most editing commands to make changes to the animation on the fly. For example, you can change delay times and other frame settings without stopping the animation. Then if the settings aren't quite right, you can also undo them while the animation is playing.

The Frames Floating Palette

The Frames Floating Palette is the second most important part of the interface. It provides a display of all set frame parameters and another means of navigating through your animation. Most importantly, the Frames Floating Palette is where you select and deselect frames while editing your animation. Simply because an image or frame is visible in the document window does not mean it is currently selected. It only means that is is the currently visible image and another or multiple other frames may actually be selected. The Frames Floating Palette shows what frames are selected and allows for their selection.

The current visible frame is always denoted by the eye icon, as seen in the picture above. Clicking on the 'visible' buttons to the left of the frames will cause the frame to become the currently visible one in the document window and the eye icon will appear in the 'visible' button. Only one frame can be visible in the document window at any given time.

Selecting and deselecting in the Frames Floating Palette follows Apple's Human Interface Guidelines precisely.

Selecting Frames

• To select a different frame than the currently selected frame, click on the frame that you want to select.
• To select multiple frames in sequence, first select the beginning frame by clicking on it then shift-click on the ending frame to select the entire sequence.
• To select multiple frames not in a sequence, select the first frame by clicking on it, then option-click to select additional frames.

Deselecting Frames

• To shorten a sequential selection of frames, shift-click on the last frame you want in the sequential selection.
• To remove a single frame from a selection of multiple frames option-click on the frame.
• To deselect all frames, option click on one frame to deselect it. Click on that deselected frame to select it at the same time as deselecting all other frames. Option-click on the single remaining selected frame to deselect it.
• Alternatively, you can use the 'Deselect All' menu command (Command-J) under the Edit menu to deselect all frames.

The Frames Floating palette also shows the current global animation settings (looping and logical screen size) and the current local settings for each frame in the animation. Due to the compact space available in the Frames Floating Palette, these settings are abbreviated in most cases.

The global settings are represented by icons for looping and logical screen size. As you can see in the picture above, the animation is set to loop 5 times and its logical screen size is 117 pixels wide by 42 pixels high. The icons are also buttons that when clicked will show dialogs, allowing you to change the looping and logical screen size settings for your animation.

Local frame settings are shown on three lines of text adjacent to the frame icon. The top line shows (from left to right in the highlighted frame):

1. Name and frame number 'Frame #2' - The name will either be the file name that the frame was added from or simply Frame in the case that an existing GIF animation has been re-opened for editing. The frame number is the linear number of the frame.
2. Interlacing status - 'NI' This is inside the parentheses with the palette type. It will either display 'NI' for non-interlaced or 'I' for interlaced.
3. Palette type - 'G' This is inside the parentheses with interlacing status. It will either be 'G' for global palette or 'L' for local palette.
4. Transparency state - 'Opaque' The last item on the top line. It will either be 'Opaque' if the image does not have a transparent color set or 'Transparent' if the image does have a transparent color set.

The second line of text shows:

1. Delay time - '20/100' Delay time is displayed in 1/100ths of a second.
2. Disposal Methods - 'Restore Previous' Possible disposal methods are:
   1. 'Unspecified' - This disposal method leaves it up to the viewing application to decide what to do with the image when it's time to show the next. It is usually treated the same as 'Don't dispose'.
   2. 'Don't dispose' - This disposal method tells the viewing application to leave the image in place and render the next image on top of the last.
   3. Restore background' - This disposal method tells the viewing application to replace the area of the image with the GIF background color specified in the GIF file, but the browser background color is often used instead of the GIF background color in browsers.
   4. 'Restore previous' - This disposal method tells the viewing application to replace what was on the screen before the image was rendered, but it is not supported yet in browsers. (Which is why it is rendered in red in the picture above, more on that later, though.)

The third line of text shows:

1. The image size - '117 x 42' The image size shows the image's width in pixels by height in pixels.
2. The position of the image within the logical screen - '0,0' The position is shown in pixel offset from the top, left corner of the logical screen. Horizontal offset to the right is shown first and vertical offset down is shown second.

The Frames Floating Palette also shows browser compatibility warnings and allows you to choose what level of browser compatibility checking to perform on your animation.

Settings that you make which will not work as expected, in the browser or browser setting that is chosen to check compatibility with, will be rendered as red and the caution button will be shown in the Frames floating palette if any settings are not fully comparable.

The button that displays the chosen browser compatibility setting will show a dialog when clicked that will allow you to select what browser to check compatibility with. No compatibility checking and a global setting to check for compatibility with all browsers are also available as options.

The caution button will when clicked display explanations of what settings are incompatible and the browser behavior that can be expected with those settings.

The total number of frames in your animation is shown at the bottom left of the Frames Floating Palette at all times, and the last control that we haven't mentioned so far is the Trash can button at the bottom right of the Frames Floating Palette that can be used to delete selected frames.

The Tools Floating Palette

The Tools Palette contains seven tools that you can use to perform various editing actions on your animation and the images it contains. They are from left to right in the Tools Palette:

1. The Arrow Tool
2. The Crop Tool
3. The Dropper Tool
4. The Edge Tool
5. The Alpha Brush Tool
6. The Hand Tool
7. The Zoom Tool

The Arrow Tool is a selection tool. It allows you to select an image within the logical screen of your animation and drag it to a new location. Note, that when the cursor is outside of the document window it will automatically switch to the Arrow Tool, since other tools can only be used to effect the current image in the document window.

The Crop Tool allows you to crop the current image in the document window. To do this, click and drag with the Crop Tool to select the portion of the image that you want to crop out. When you release the mouse a selection will remain. You can then drag the corners of the selection to adjust its size if needed. Clicking outside the crop selection will cancel the action. Clicking inside the crop selection will crop the image to that selection.

The Dropper Tool allows you to set the transparent color for the currently visible image. Clicking with the Dropper Tool on a color will set that color to transparent and will also clear any other colors that may be set to transparent. Shift-clicking on a color will add that color to the transparency without removing any other colors already set to transparent. Option-clicking on a color will remove that color from the transparency.

The Edge Tool is used to automatically clean up the edges of your image's transparency. It is specifically designed to clean up halo effects caused by anti-aliasing. The Edge Tool is used like a brush. Drag it along the edge of your transparency to use it.

The Alpha Brush Tool allows you to 'paint' with transparency. It will allow you to make parts of your image transparent without regard to color. It is used like any brush tool.

The Hand Tool serves the same purpose as the scroll bars in the document window. It allows you to move the view of the current image in the document window when the entire image will not fit within the window. To use the Hand Tool simply click-drag with it.

The Zoom Tool allows you to increase or decrease the magnification level in the document window. Clicking in the document with the Zoom Tool will increase the magnification level. Option clicking will decrease the magnification level.

The Palette Floating Palette

The Palette Floating Palette always shows the palette or color table of the currently visible image in the document window of your animation. It also allows you to modify the RGB values of individual colors in the palette, and serves as an alternate method to add and remove colors from the image's transparency. The Palette Floating Palette normally has the appearance below, but can be expanded to reveal a set of RGB sliders for modifying colors.

At the top-left of the Palette Floating Palette you see the eye icon, used to represent the currently visible image in the Frames Floating Palette. This is static and only serves as a visual reminder that the palette visible in the Palette Floating Palette belongs to the currently visible image in the document window. Next to the eye icon is the frame name and number, which also identifies to what image the palette belongs. Also, the Palette Floating Palette will indicate whether the palette is a Global palette available for multiple images within your animation or a Local palette that is specific to a single image within the animation. The bit depth of the palette is also displayed.

You can select colors in the palette within the Palette Floating Palette. The currently selected color will be drawn with a red border around it. When a color is selected you can use the transparency controls in the Palette Floating Palette in the same way as you would use the Dropper Tool on the image to add and remove colors from the image's transparency.

There are three transparency controls in the Palette Floating Palette. From left to right they are the 'Set to Transparency' button, the 'Add to Transparency' button, and the 'Remove from Transparency' button.

• The 'Set to Transparency' button will set the currently selected color in the palette to the transparent color of the currently visible image. It will, also, remove any other colors that may be set to the image's transparency, so that only the currently selected color will designate the transparency for the currently visible image.
• The 'Add to Transparency' button will add the currently selected color in the palette to the transparency of the currently visible image. It will add the color to the transparency of the image even if no color had been previously designated as transparent for the image.
• The 'Remove from Transparency' button will remove the currently selected color in the palette from the transparency of the image. If the current color was not set as transparent, it will have no effect.

You can also change the RGB values of individual colors in an image's palette from the Palette Floating Palette. To do this, you first need to expand the Palette Floating Palette to reveal the RGB slider color picker in it. Expanding the Palette Floating Palette is done by clicking on the upward pointing triangle beneath the image's palette. (The bottom-left of the Palette Floating Palette when it is collapsed.)

When the Palette Floating Palette is expanded, you can use the RGB slider color picker to adjust the RGB values of individual colors in the palette. To the right of each slider will be the color component value for that slider. (The red or 'R:' slider and its corresponding color component value is highlighted in the picture above.) Color component values are given both in decimal (0 - 255 range) and hexadecimal (0 - FF range) numbers. Combining the individual color component values gives you the full RGB color. 255,254,174 or #FFFEAE in this case.

Above the RGB sliders is a color swatch that provides a larger visual preview of the color selected in the palette. This swatch will change as you adjust the RGB sliders, as will the corresponding color in the image visible in the document window. Changing the RGB values of colors in the palette is undoable.

Dragging the sliders will only allow you to set even number values for individual components of the RGB color. To set odd number values for color components, you must use the 'bump' buttons on each end of the sliders to bump the current value down one or up one as needed. A bump button, when held down, will scroll the corresponding slider down or up through the entire possible value range for the slider.

The Browser Background Floating Palette

The Browser Background Floating Palette allows you to set the background color that your animation is intended to appear against in browsers, and also the GIF background color for your animation. In GIFmation(tm) 2.1 both are the same. The GIF background color is automatically resolved to be the same as the set browser background color to help insure the appearance of your animation when viewed.

The RGB color sliders in the Browser Background Floating Palette function in the same manner as the RGB sliders in the expanded Palette Floating Palette. Dragging slider thumbs will adjust the value of the color component through even values only, and the bump buttons on each end of the sliders must be used to obtain odd values. The numeric value of the set color is displayed in both decimal and hexadecimal values on the right side of the Browser Background Floating Palette, and the actual color set is displayed in the large color swatch on the left side of the Browser Background Floating Palette.

The Browser Background Floating Palette also allows you to save frequently used colors and allows you to load default (black and white) colors and saved colors from the colors pop-up menu above the RGB sliders. To load a color, simply select the color name in the menu. To save a color, first set the RGB sliders to the color you would like to save. Then select 'Save Current Color..' in the menu. A dialog will appear so you can name the color you are saving, then that color will also be available from the color menu in the Browser Background Floating Palette and in color menus elsewhere in GIFmation(tm) 2.1.

It is important, when working in GIFmation(tm) 2.1, to accurately set the browser background color. The Edge Tool depends on this color being set correctly for accurate functioning, and the GIF background color saved with the file will be resolved to the color set in the Browser Background Floating Palette.

Copyright 1997 BoxTop Software, Inc. All rights reserved. GIFmation(tm) is a Trademark of BoxTop Software, Inc. All other Trademarks are recognized and the property of their respective owners.

Artwork produced using Snapz, Photoshop, PhotoGIF, and GIFmation. HTML produced using BBEdit Lite.